<!DOCTYPE html>
<html>
	<head>
		<title>jStorage - simple JavaScript plugin to store data locally</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		
		<style type="text/css">
			body{font-family: Sans-serif;font-size: 13px;color: #333;}
			table{border-left: 1px solid #CDEB8B;border-top: 1px solid #CDEB8B;}
			h1{padding-top: 50px;font-size: 26px;font-weight: bold; border-bottom: 3px solid #CDEB8B;}
			td{padding: 3px;border-right: 1px solid #CDEB8B;border-bottom: 1px solid #CDEB8B;}
			thead{background: #006E2E;color: white;}
			.container{width: 700px;margin: 10px auto;}
		</style>
		
		<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
		<script src="../jstorage.js"></script>
		
		<script>
			JSOTRAGE_TEST = {
				/**
				 * insert_value
				 * takes data from form fields and stores it with jStorage
				 * @return
				 */
				insert_value: function(){
					var row = new Element("tr"),
						key = $('key').value,
						val = $('val').value,
						ttl = Number($('ttl').value) || 0;
					if(!key){
						alert("KEY NEEDS TO BE SET!");
						$('key').focus();
						return;
					}
					$.jStorage.set(key, val);
					if(ttl>0){
					    $.jStorage.setTTL(key, ttl);
					}
					$('key').value = "";
					$('val').value = "";
					$('ttl').value = "";
					this.reDraw();
				},
			
				/**
				 * get_value
				 * alerts a value from jStorage with a key from a form field
				 * @return
				 */
				get_value: function(){
					var value = $.jStorage.get($F("key2"));
					alert(value);
					$('key2').value = "";
				},
			
				/**
				 * flush_values
				 * clears all data
				 * @return
				 */
				flush_values: function(){
					$.jStorage.flush();
					this.reDraw();
				},
			
				/**
				 * reDraw
				 * fills table with data from jStorage
				 * @return
				 */
				reDraw: function(){
					var row, del, indx=$.jStorage.index(), valuetd;
					$$("tr[class~=rida]").each(function(c){c.remove();});
					for(var i=0; i<indx.length; i++){
						row = new Element("tr",{className:"rida"});
						row.insert(new Element("td").update(indx[i]));
						valuetd = new Element("td").update($.jStorage.get(indx[i]));
						valuetd.setAttribute("colspan",2);
						valuetd.colspan = 2;
						row.insert(valuetd);
						del = new Element("a",{href:"javascript:void(0)"}).update("DEL");
						(function(i){
							del.observe("click", function(){
								$.jStorage.deleteKey(i);
								JSOTRAGE_TEST.reDraw();
							});
						}).call(this,indx[i])
						row.insert(new Element("td").insert(del));
						$("tulemused").insert(row);
					}
				}
			}

			$.jStorage.listenKeyChange("test", function(key, action){
				JSOTRAGE_TEST.reDraw();
				alert(key+" "+action+" ("+$.jStorage.get(key, "~~")+")");
			});

			var hasFocus = false;
			$.jStorage.subscribe("valchange", function(channel, payload){
				if(window.hasFocus){
					return;
				}
				$("val").value = payload;
			});
		</script>
	</head>
	<body>
	
	<div class="container">
	
	<h1>jStorage - store data locally with JavaScript</h1>

	<p><strong><a href="http://www.jstorage.info">jStorage</a></strong> is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data on browser side.</p>
	
	<p>Add some values and refresh the page - if your browser supports storing local data, then the values should survive the page refresh.</p>
	
	<table cellspacing="0" cellpadding="0" style="width: 100%">
	<thead>
		<tr>
		  <td width="120">KEY</td>
		  <td>VALUE</td>
		  <td>TTL (ms)</td>
		  <td width="50">&nbsp;</td>
		 </tr>
	</thead>
	<tbody id="tulemused"></tbody>
	<tfoot>
		<tr>
			<td><input type="text" id="key" name="key" value="" style="width: 110px;" /></td>
			<td><input type="text" id="val" name="val" value="" style="width: 98%" onblur="window.hasFocus=false;" onfocus="window.hasFocus=true;" onkeyup="$.jStorage.publish('valchange', this.value);" onchange="$.jStorage.publish('valchange', this.value);"/></td>
			<td width="100"><input type="text" id="ttl" name="ttl" value="" style="width: 100px" /></td>
			<td><a href="javascript:JSOTRAGE_TEST.insert_value()">ADD</a></td>
		</tr>
		<tr>
			<td><input type="text" id="key2" name="key2" value="" style="width: 110px;" /></td>
			<td colspan="2">Clicking "GET" alerts the value for provided key with the method <em>$.jStorage.get(key)</em></td>
			<td><a href="javascript:JSOTRAGE_TEST.get_value()">GET</a></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td colspan="2">Clear all saved data</td>
			<td><a href="javascript:JSOTRAGE_TEST.flush_values()">FLUSH</a></td>
		</tr>
		<tr>
            <td>&nbsp;</td>
            <td colspan="2">Refresh to clear expired keys</td>
            <td><a href="javascript:JSOTRAGE_TEST.reDraw()">REFRESH</a></td>
        </tr>
	</tfoot>
	</table>
	
	<p><b>NB!</b> Key "test" has a special meaning - if it is updated or deleted, all open windows of the same page will alert the change.</p>

<p id="moot"></p>
	<p id="footer">&copy; 2010 - 2012 Andris Reinman, <a href="mailto:andris.reinman@gmail.com">andris.reinman@gmail.com</a><br /><a href="http://www.jstorage.info">jStorage</a> is licensed under <a href="http://www.jstorage.info/static/license.txt">MIT-styled license</a>, so basically you can do whatever you want to do with it.</p>
	
	<script>
		// Fill the table with previously saved data
		JSOTRAGE_TEST.reDraw();
	</script>

	</body>
</html>